import { SearchBar, Grid, Image, AutoCenter, Tag, List, Button, JumboTabs } from 'antd-mobile';
import '../assets/style/home.scss';
import goodsImg from '../assets/imgs/01.png';

export default function Home() {
  return (
    <div className='home-container'>
      <div className='header'>
        <div className="search-bar">
          <div className='logo'></div>
          <SearchBar style={{ '--background': '#ffffff' }} placeholder='请输入关键词' />
        </div>

        {/* 新人专享 */}
        <div className='new-person'>
          <h3>新人专享</h3>
          <div className="goods-list-wrap">
            <div className="goods-list">
              {
                [1, 1, 1, 1, 1, 1, 1,].map((item, index) => (
                  <div key={index} className="goods-item">
                    <Image style={{ borderRadius: 10 }} src={goodsImg} fit='fill'></Image>
                    <div style={{ color: '#FFF' }}>&yen;199
                      &nbsp;&nbsp;
                      <del style={{ fontSize: 14 }}>&yen;299</del>
                    </div>
                  </div>
                ))
              }
            </div>
          </div>
        </div>

      </div>

      <div className='nav-group'>
        {/* 快速导航 */}
        <Grid columns={5} gap={8}>
          <Grid.Item>
            <AutoCenter>
              <Image src={'icons/seckill.png'} width={36} height={36} fit='fill'></Image>
            </AutoCenter>
            限时秒杀
          </Grid.Item>
          <Grid.Item>
            <AutoCenter>
              <Image src={'icons/hot.png'} width={36} height={36} fit='fill'></Image>
            </AutoCenter>
            畅销商品
          </Grid.Item>
          <Grid.Item>
            <AutoCenter>
              <Image src={'icons/brand.png'} width={36} height={36} fit='fill'></Image>
            </AutoCenter>
            品质大牌
          </Grid.Item>
          <Grid.Item>
            <AutoCenter>
              <Image src={'icons/selfsupport.png'} width={36} height={36} fit='fill'></Image>
            </AutoCenter>
            小U自营
          </Grid.Item>
          <Grid.Item>
            <AutoCenter>
              <Image src={'icons/integral.png'} width={36} height={36} fit='fill'></Image>
            </AutoCenter>
            积分商城
          </Grid.Item>
        </Grid>

        {/*  万人团  */}

        <div className="group">
          <h1>万人团 </h1>
          {
            [1, 1, 1, 1, 1].map((item, index) => (
              <div key={index} className='group-item'>
                <Image src={goodsImg} fit='fill' />
                <div className='goods-info'>
                  <Tag color="warning" className='tag'>4.5折</Tag>
                  <h5>商品名称</h5>
                  <div className="btn-panic-buy ">
                    <div className="price">
                      &yen;199 &nbsp;
                      <del style={{ color: '#999' }}>&yen;299</del>
                    </div>

                  </div>
                </div>
              </div>
            ))
          }
        </div>

      </div>


      {/* 限时秒杀 */}
      <div className="seckill">
        <h3>限时秒杀</h3>
        <div className="goods-list-wrap">
          <div className="goods-list">
            {
              [1, 1, 1, 1, 1, 1, 1,].map((item, index) => (
                <div key={index} className="goods-item">
                  <Image style={{ borderRadius: 10 }} src={goodsImg} fit='fill'></Image>
                  <div className='price'>&yen;199
                    &nbsp;&nbsp;
                    <del style={{ fontSize: 14, color: '#999' }}>&yen;299</del>
                  </div>
                </div>
              ))
            }
          </div>
        </div>

      </div>

      {/* 商品推荐 */}
      <JumboTabs style={{ background: '#FFF', marginTop: 10 }}>
        <JumboTabs.Tab title='热销好货' description='限量购买' key='1'>
          <List mode="default" className='goods-recom'>
            {
              [1, 1, 1, 1].map((item, index) => (
                <List.Item key={index}>
                  <div className="goods-card">
                    <Image style={{ borderRadius: 8 }} className='goods-img' src={goodsImg} fit='fill'></Image>
                    <div className='goods-desc'>
                      <Tag color="warning" className='tag'>4.5折</Tag>
                      <div className='goods-name'>热销好货</div>
                      <div className="horizontal">
                        <div className="goods-price">
                          &yen; 199
                          <del>&yen;299</del>
                        </div>
                        <div>
                          <Button className='btn-add-cart' shape="rounded">加入购物车</Button>
                        </div>
                      </div>



                    </div>
                  </div>
                </List.Item>
              ))
            }
          </List>
        </JumboTabs.Tab>
        <JumboTabs.Tab title='折上折区' description='不买就亏' key='2'>
          <List mode="default" className='goods-recom'>
            {
              [1, 1, 1, 1].map((item, index) => (
                <List.Item key={index}>
                  <div className="goods-card">
                    <Image style={{ borderRadius: 8 }} className='goods-img' src={goodsImg} fit='fill'></Image>
                    <div className='goods-desc'>
                      <Tag color="warning" className='tag'>5.5折</Tag>
                      <div className='goods-name'>折上折区</div>


                      <div className="horizontal">
                        <div className="goods-price">
                          &yen; 199
                          <del>&yen;299</del>
                        </div>
                        <div>
                          <Button className='btn-add-cart' shape="rounded">加入购物车</Button>
                        </div>
                      </div>



                    </div>
                  </div>
                </List.Item>
              ))
            }
          </List>
        </JumboTabs.Tab>
        <JumboTabs.Tab title='时令水果' description='当季限定' key='3'>
          <List mode="default" className='goods-recom'>
            {
              [1, 1, 1, 1].map((item, index) => (
                <List.Item key={index}>
                  <div className="goods-card">
                    <Image style={{ borderRadius: 8 }} className='goods-img' src={goodsImg} fit='fill'></Image>
                    <div className='goods-desc'>
                      <Tag color="warning" className='tag'>6.5折</Tag>
                      <div className='goods-name'>时令水果</div>


                      <div className="horizontal">
                        <div className="goods-price">
                          &yen; 199
                          <del>&yen;299</del>
                        </div>
                        <div>
                          <Button className='btn-add-cart' shape="rounded">加入购物车</Button>
                        </div>
                      </div>



                    </div>
                  </div>
                </List.Item>
              ))
            }
          </List>
        </JumboTabs.Tab>
        <JumboTabs.Tab title='粮油调味' description='一键购齐' key='4'>
          <List mode="default" className='goods-recom'>
            {
              [1, 1, 1, 1].map((item, index) => (
                <List.Item key={index}>
                  <div className="goods-card">
                    <Image style={{ borderRadius: 8 }} className='goods-img' src={goodsImg} fit='fill'></Image>
                    <div className='goods-desc'>
                      <Tag color="warning" className='tag'>7.5折</Tag>
                      <div className='goods-name'>粮油调味</div>


                      <div className="horizontal">
                        <div className="goods-price">
                          &yen; 199
                          <del>&yen;299</del>
                        </div>
                        <div>
                          <Button className='btn-add-cart' shape="rounded">加入购物车</Button>
                        </div>
                      </div>



                    </div>
                  </div>
                </List.Item>
              ))
            }
          </List>
        </JumboTabs.Tab>
      </JumboTabs>



    </div>
  )
}
